<template>
	<view class="content">
		<img src="../../static/images/banner.png" alt="" />
		
		<div>
			<div class="yi">
				<div v-for="(item,index) in items1" :key="index" @click="itemClick1(item.id,index)" :class="{ active: selectedIndex1 === index}">{{item.text}}</div>
			</div>
			<div class="er">
				<div v-for="(item,index) in items2[val]" :key="index" @click="itemClick2(item.id,index)" :class="{ active2: selectedIndex2 === index}">{{item.text}}</div>
			</div>
			<div class="san">
				<div v-for="(item,index) in arr[selectedIndex3]" :key="index">{{item.text}}</div>
			</div>
		</div>
		
	</view>
	
</template>

<script>
	

	
	export default{
		data(){
			return{
				val:0,
				selectedIndex1:0,
				selectedIndex2:0,
				selectedIndex3:0,
				items1 : [
					{id:1,text:"哲学"},
					{id:2,text:"经济学"},
					{id:3,text:"法学"},
					{id:4,text:"教育学"},
					{id:5,text:"文学"},
					{id:6,text:"历史学"},
					{id:7,text:"理学"},
					{id:8,text:"工学"},
					{id:9,text:"农学"},
					{id:10,text:"医学"},
					{id:11,text:"管理学"},
					{id:12,text:"艺术学"}
				],
				items2:[
					[
						{id:1,text:"哲学类"}
					],
					[
						{id:1,text:"经济学类"},
						{id:2,text:"经济学类财政学类"},
						{id:3,text:"金融学"},
						{id:4,text:"经济与贸易类"}
					],
					[
						{id:1,text:"法学类"},
						{id:2,text:"政治学类"},
						{id:3,text:"社会学类"},
						{id:4,text:"民族学类"},
						{id:5,text:"马克思主义理论类"},
						{id:6,text:"公安学类"}
					],
					[
						{id:1,text:"教育学类"},
						{id:2,text:"体育学类"}
					],
					[
						{id:1,text:"中国语言文字类"},
						{id:2,text:"外国语言文学类"},
						{id:3,text:"新闻传播类"}
					],
					[
						{id:1,text:"历史学类"}
					],
					[
						{id:1,text:"数学类"},
						{id:2,text:"物理类"},
						{id:3,text:"化学类"},
						{id:4,text:"天文学类"},
						{id:5,text:"地理学科类"},
						{id:6,text:"大气学科类"},
						{id:7,text:"海洋科学类"},
						{id:8,text:"地球物理学类"},
						{id:9,text:"地质学类"},
						{id:10,text:"生物科学类"},
						{id:11,text:"心理学类"},
						{id:12,text:"统计学类"}
					],
					[
						{id:1,text:"力学类"},
						{id:2,text:"机械类"},
						{id:3,text:"仪器类"},
						{id:4,text:"材料类"},
						{id:5,text:"能源动力类"},
						{id:6,text:"电气类"},
						{id:7,text:"电子信息类"},
						{id:8,text:"自动化类"},
						{id:9,text:"计算机类"},
						{id:10,text:"土木类"},
						{id:11,text:"水利类"},
						{id:12,text:"测绘类"},
						{id:13,text:"化工与制药类"},
						{id:14,text:"地质类"},
						{id:15,text:"矿业类"},
						{id:16,text:"纺织类"},
						{id:17,text:"轻工类"},
						{id:18,text:"交通运输类"},
						{id:19,text:"海洋工程类"},
						{id:20,text:"航空航天类"},
						{id:21,text:"兵器类"},
						{id:22,text:"核工程类"},
						{id:23,text:"农业工程类"},
						{id:24,text:"林业工程类"},
						{id:25,text:"环境科学与工程类"},
						{id:26,text:"生物医学工程类"},
						{id:27,text:"食品科学与工程类"},
						{id:28,text:"建筑类"},
						{id:29,text:"安全科学与工程类"},
						{id:30,text:"生物工程类"},
						{id:31,text:"公安技术类"},
						{id:32,text:"交叉工程类"},
						{id:33,text:"医学技术类"}
					],
					[
						{id:1,text:"植物生产类"},
						{id:2,text:"自然保护与环境生态类"},
						{id:3,text:"动物生产类"},
						{id:4,text:"动物医学类"},
						{id:5,text:"林学类"},
						{id:6,text:"水产类"},
						{id:7,text:"草学类"}
					],
					[
						{id:1,text:"基础医学类"},
						{id:2,text:"临床医学类"},
						{id:3,text:"口腔医学类"},
						{id:4,text:"公共卫生与预防医学类"},
						{id:5,text:"中医医学"},
						{id:6,text:"中西医结合类"},
						{id:7,text:"药学类"},
						{id:8,text:"中药药学"},
						{id:9,text:"法医学类"},
						{id:10,text:"医学技术类"},
						{id:11,text:"护理学类"}
					],
					[
						{id:1,text:"管理科学与工程类"},
						{id:2,text:"工商管理类"},
						{id:3,text:"农业经济管理类"},
						{id:4,text:"公共管理类"},
						{id:5,text:"图书情报与档案管理类"},
						{id:6,text:"物流管理与工程类"},
						{id:7,text:"工业工程类"},
						{id:8,text:"电子商务类"},
						{id:9,text:"旅游管理类"}
					],
					[
						{id:1,text:"艺术学理论类"},
						{id:2,text:"音乐与舞蹈学类"},
						{id:3,text:"戏剧与影视学类"},
						{id:4,text:"美术学类"},
						{id:5,text:"设计学类"}
					]
				],
				items3:[
					[
						[
							{id:1,text:"哲学"},
							{id:2,text:"逻辑学"},
							{id:3,text:"宗教学"},
							{id:4,text:"伦理学"}
						]
					],
					[
						[
							{id:1,text:"经济学"},
							{id:2,text:"经济统计学"},
							{id:3,text:"国民经济管理"},
							{id:4,text:"资源与环境经济学"},
							{id:5,text:"商务经济学"},
							{id:6,text:"能源经济"},
							{id:7,text:"劳动经济学"},
							{id:8,text:"经济工程"},
							{id:9,text:"数字经济"}
						],
						[
							{id:1,text:"财政学"},
							{id:2,text:"税收学"},
							{id:3,text:"国际税收"}
						],
						[
							{id:1,text:"金融学"},
							{id:2,text:"金融工程"},
							{id:3,text:"保险学"},
							{id:4,text:"投资学"},
							{id:5,text:"金融数学"},
							{id:6,text:"信用管理"},
							{id:7,text:"经济与金融"},
							{id:8,text:"精算学"},
							{id:9,text:"互联网金融"},
							{id:10,text:"金融科技"},
							{id:11,text:"金融审计"}
						],
						[
							{id:1,text:"国际经济与贸易"},
							{id:2,text:"贸易经济"},
							{id:3,text:"国际经济发展合作"}
						]
					],
					[
						[
							{id:1,text:"法学"},
							{id:2,text:"知识产权"},
							{id:3,text:"监狱学"},
							{id:4,text:"信用风险管理与法律防控"},
							{id:5,text:"国际贸易规则"},
							{id:6,text:"司法警察学"},
							{id:7,text:"社区矫正"}
						],
						[
							{id:1,text:"政治学与行政学"},
							{id:2,text:"国际政治"},
							{id:3,text:"外交学"},
							{id:4,text:"国际事务与国际关系"},
							{id:5,text:"政治学、经济学与哲学"},
							{id:6,text:"国际组织与全球治理"}
						],
						[
							{id:1,text:"社会学"},
							{id:2,text:"社会工作"},
							{id:3,text:"人类学"},
							{id:4,text:"女性学"},
							{id:5,text:"家政学"},
							{id:6,text:"老年学"},
							{id:7,text:"社会政策"}
						],
						[
							{id:1,text:"民族学"}
						],
						[
							{id:1,text:"科学社会主义"},
							{id:2,text:"中国共产党历史"},
							{id:3,text:"思想政治教育"},
							{id:4,text:"马克思主义理论"}
						],
						[
							{id:1,text:"治安学"},
							{id:2,text:"侦查学"},
							{id:3,text:"边防管理"},
							{id:4,text:"禁毒学"},
							{id:5,text:"警犬技术"},
							{id:6,text:"经济犯罪侦察"},
							{id:7,text:"边防指挥"},
							{id:8,text:"消防指挥"},
							{id:9,text:"警卫学"},
							{id:10,text:"公安情报学"},
							{id:11,text:"公安管理学"},
							{id:12,text:"涉外警务"},
							{id:13,text:"国内安全保卫"},
							{id:14,text:"警务指挥与战术"},
							{id:15,text:"技术侦察学"},
							{id:16,text:"海警执法"},
							{id:17,text:"公安政治工作"},
							{id:18,text:"移民管理"},
							{id:19,text:"出入境管理"},
							{id:20,text:"反恐警务"}
						]
					],
					[
						[
							{id:1,text:"人文教育"},
							{id:2,text:"教育技术学"},
							{id:3,text:"艺术教育"},
							{id:4,text:"学前教育"},
							{id:5,text:"小学教育"},
							{id:6,text:"特殊教育"},
							{id:7,text:"华文教育"},
							{id:8,text:"教育康复学"},
							{id:9,text:"卫生教育"},
							{id:10,text:"认知科学与技术"}
						],
						[
							{id:1,text:"体育教育"},
							{id:2,text:"运动训练"},
							{id:3,text:"社会体育指导与管理"},
							{id:4,text:"武术与民族传统体育"},
							{id:5,text:"运动人体科学"},
							{id:6,text:"运动康复"},
							{id:7,text:"休闲体育"},
							{id:8,text:"体能训练"},
							{id:9,text:"冰雪运动"},
							{id:10,text:"电子竞技运动与管理"},
							{id:11,text:"智能体育工程"},
							{id:12,text:"体育旅游"},
							{id:13,text:"运动能力开发"}
						]
					],
					[
						[
							{id:1,text:"汉语言文学"},
							{id:2,text:"汉语言"},
							{id:3,text:"汉语国际教育"},
							{id:4,text:"中国少数民族语言文学"},
							{id:5,text:"古典文献学"},
							{id:6,text:"应用语言学"},
							{id:7,text:"秘书学"},
							{id:8,text:"中国语言与文化"},
							{id:9,text:"手语翻译"}
						],
						[
							{id:1,text:"桑戈语"},
							{id:2,text:"英语"},
							{id:3,text:"俄语"},
							{id:4,text:"德语"},
							{id:5,text:"法语"},
							{id:6,text:"西班牙语"},
							{id:7,text:"阿拉伯语"},
							{id:8,text:"日语"},
							{id:9,text:"波斯语"},
							{id:10,text:"朝鲜语"},
							{id:11,text:"菲律宾语"},
							{id:12,text:"语言学"},
							{id:13,text:"塔玛齐格特语"},
							{id:14,text:"瓜哇语"},
							{id:15,text:"旁遮普语"},
							{id:16,text:"梵语巴利语"},
							{id:17,text:"印度尼西亚语"},
							{id:18,text:"印地语"},
							{id:19,text:"柬埔寨语"},
							{id:20,text:"老挝语"},
							{id:21,text:"缅甸语"},
							{id:22,text:"马来语"},
							{id:23,text:"蒙古语"},
							{id:24,text:"僧伽罗语"},
							{id:25,text:"泰语"},
							{id:26,text:"乌尔都语"},
							{id:27,text:"希伯来语"},
							{id:28,text:"越南语"},
							{id:29,text:"豪撒语"},
							{id:30,text:"斯瓦西里语"},
							{id:31,text:"阿尔巴尼亚语"},
							{id:32,text:"保加利亚语"},
							{id:33,text:"波兰语"},
							{id:34,text:"捷克语"},
							{id:35,text:"斯洛伐克语"},
							{id:36,text:"罗马尼亚语"},
							{id:37,text:"葡萄牙语"},
							{id:38,text:"瑞典语"},
							{id:39,text:"塞尔维亚语"},
							{id:40,text:"土耳其语"},
							{id:41,text:"希腊语"},
							{id:42,text:"匈牙利语"},
							{id:43,text:"意大利语"},
							{id:44,text:"泰米尔语"},
							{id:45,text:"普什图语"},
							{id:46,text:"世界语"},
							{id:47,text:"孟加拉语"},
							{id:48,text:"尼泊尔语"},
							{id:49,text:"克罗地亚语"},
							{id:50,text:"荷兰语"},
							{id:51,text:"芬兰语"},
							{id:52,text:"乌克兰语"},
							{id:53,text:"挪威语"},
							{id:54,text:"丹麦语"},
							{id:55,text:"冰岛语"},
							{id:56,text:"爱尔兰语"},
							{id:57,text:"拉脱维亚语"},
							{id:58,text:"立陶宛语"},
							{id:59,text:"斯洛文尼亚语"},
							{id:60,text:"爱沙尼亚语"},
							{id:61,text:"马耳他语"},
							{id:62,text:"哈萨克语"},
							{id:63,text:"乌兹别克语"},
							{id:64,text:"祖鲁语"},
							{id:65,text:"拉丁语"},
							{id:66,text:"翻译"},
							{id:67,text:"商务英语"},
							{id:68,text:"阿姆哈拉语"},
							{id:69,text:"吉尔吉斯语"},
							{id:70,text:"索马里语"},
							{id:71,text:"土库曼语"},
							{id:72,text:"加泰罗尼亚语"},
							{id:73,text:"约鲁巴语"},
							{id:74,text:"亚美尼亚语"},
							{id:75,text:"马达加斯加语"},
							{id:76,text:"格鲁吉亚语"},
							{id:77,text:"阿塞拜疆语"},
							{id:78,text:"阿非利卡语"},
							{id:79,text:"马其顿语"},
							{id:80,text:"塔吉克语"},
							{id:81,text:"茨瓦纳语"},
							{id:82,text:"恩德贝莱语"},
							{id:83,text:"科摩罗语"},
							{id:84,text:"克里奥尔语"},
							{id:85,text:"绍纳语"},
							{id:86,text:"提格雷尼亚语"},
							{id:87,text:"白俄罗斯语"},
							{id:88,text:"毛利语"},
							{id:89,text:"汤加语"},
							{id:90,text:"萨摩亚语"},
							{id:91,text:"库尔德语"},
							{id:92,text:"比斯拉马语"},
							{id:93,text:"达里语"},
							{id:94,text:"德顿语"},
							{id:95,text:"迪维希语"},
							{id:96,text:"斐济语"},
							{id:97,text:"库克群岛毛利语"},
							{id:98,text:"隆迪语"},
							{id:99,text:"卢森堡语"},
							{id:100,text:"卢旺达语"},
							{id:101,text:"纽埃语"},
							{id:102,text:"皮金语"},
							{id:103,text:"切瓦语"},
							{id:104,text:"塞苏陀语"}
						]
					]
				],
				
				
				
				
				arr:[
						[
							{id:1,text:"哲学"},
							{id:2,text:"逻辑学"},
							{id:3,text:"宗教学"},
							{id:4,text:"伦理学"}
						]
					],
				val1:null
			}
			
		},
		methods:{
			itemClick1(a,b){
				this.selectedIndex2 = 0;
				this.val = a-1;
				this.selectedIndex1 = b;
				
				this.arr = this.items3[b];
				this.val = a-1;
				
				this.arr = this.items3[b];
				console.log(this.arr);
				
				this.selectedIndex3 = 0;
				this.val1 = 0;
			},
			itemClick2(a,b){
				// this.val = a-1;
				this.selectedIndex2 = b;
				
				this.arr = this.items3[this.val];
				console.log(this.arr);
				this.selectedIndex3 = b;
			}
		},
		mounted(){
			// console.log("aaa");
			// console.log(this.items2[0]);
			// console.log(this.$refs.lb);
		}
	}
	
</script>

<style>

.content{
	height:100vh;
	background-color:rgb(227,234,246);
	/* background-color:red; */
	padding: 10px;
}
.content>image{
	width:100%;
	height:250rpx;
	border-radius:10px;
	margin-bottom:10px;
}
.content>view{
	height:1000rpx;
	background-color:#fff;
	border-radius:10px;
	display: flex;
	line-height:45rpx !important;
}
.content>view>view>view{
	padding:20rpx 0;
}
.yi{
	width:30%;
	height:100%;
	/* background-color:red; */
	border-right:1px solid #ddd;
	overflow: auto;
}
.er{
	width:30%;
	height:100%;
	/* background-color:green; */
	border-right:1px solid #ddd;
	overflow:auto;
}
.san{
	width:40%;
	height:100%;
	/* background-color: blue; */
	overflow:auto;
}
.content>view{
	text-align:center;
	color:#333;
	line-height:80rpx;
	font-size:35rpx;
}
.active{
	background-color:rgb(86,163,254) !important;
	color:#fff;
	font-weight:bolder;
}
.active2{
	background-color:rgb(86,163,254) !important;
	color:#fff;
	font-weight:bolder;
}
</style>
